<template>
  <div class="search-popup">
    <!-- 头部搜索 -->
    <van-search
      v-model="searchValue"
      show-action
      :placeholder="placeVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <!-- 搜索中历史记录、热门搜索 -->
    <HistoryHot
      v-if="blockShow == 1"
      :historyListData="historyListData"
      :hotKeywordListData="hotKeywordListData"
      @onSearch="onSearch"
    />
    <!-- 搜索联想列表 -->
    <SearchTipsList
      v-if="blockShow == 2"
      :searchTipsListData="searchTipsListData"
      @onSearch="onSearch"
    />
    <!-- 搜索商品列表 -->
    <SearchProducts
      v-if="blockShow == 3"
      :goodsList="goodsList"
      :filterCategory="filterCategory"
      @changePrice="changePrice"
      @changeCategory="changeCategory"
    />
  </div>
</template>


<script>
import HistoryHot from "@/components/HistoryHot";
import SearchTipsList from "@/components/SearchTipsList";
import SearchProducts from "@/components/SearchProducts";
import {
  GetSearchPopupData,
  GetSearchTipsListData,
  GetGoodsListData,
} from "@/request/api.js";

export default {
  data() {
    return {
      searchValue: "",
      placeVal: "先写死",
      order: "desc",
      sort: "id",
      categoryId: "0",
      /* 
        1、历史和热门
        2、搜索列表
        3、产品列表
       */
      blockShow: 1,
      // 历史记录数组
      historyListData: [],
      // 热门搜索数组
      hotKeywordListData: [],
      // 搜索提示数组
      searchTipsListData: [],
      // 商品搜索数组
      goodsList: [],
      // 筛选中产品分类数组
      filterCategory: [],
    };
  },
  created() {
    // 搜索中历史和热门请求
    GetSearchPopupData()
      .then((res) => {
        this.placeVal = res.data.defaultKeyword.keyword;
        this.historyListData = res.data.historyKeywordList;
        this.hotKeywordListData = res.data.hotKeywordList;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {},
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProducts,
  },
  methods: {
    // 输入框内容变化时回调方法
    onInput(val) {
      this.blockShow = 2;
      let obj = { keyword: val };
      GetSearchTipsListData(obj).then((res) => {
        this.searchTipsListData = res.data;
      });
    },
    // 确定搜索时回调方法
    onSearch(val) {
      this.blockShow = 3;
      var obj = {
        keyword: val,// 用户搜索的关键字
        order: this.order,// 排序 desc 从高到低    asc从低到高
        sort: this.sort,// sort 以什么来排序   id  price
        categoryId: this.categoryId,// 分类id
      }
      GetGoodsListData(obj).then((res) => {
        this.goodsList = res.data.goodsList;
        let newArr = JSON.parse(
          JSON.stringify(res.data.filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        this.filterCategory = newArr;
      });
    },
    //取消回调
    onCancel() {
      this.$router.go(-1);
    },
        // 分类筛选回调方法
    changeCategory(val) {
      this.categoryId = val;
      this.onSearch(this.searchValue);
    },
    // 价格筛选回调方法
    changePrice(val){
      this.order = val;
      this.sort = "price";
      this.onSearch(this.searchValue);
    },
  },
};
</script>


<style lang="less" scoped>
.search-popup {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  // fixed固定定位宽高最大值只能在窗口中，absolute所以要写成绝对定位
  position: absolute;
  top: 0;
}
</style>